import Vue from 'vue'
import Router from 'vue-router'
// import Home from './views/Home.vue'

//按需加载对应组件  异步加载的优化上，我们使用了 webpack 提供的 require.ensure() 进行了代码拆分，主要区别在于没有优化前，访问 Home 页面会一起加载 About 组件的资源，因为它们打包进了一个 app.js 中
  // 引入 Home 组件
  const Home = (resolve:any) => {
    require.ensure(['./views/Home.vue'], () => {
        resolve(require('./views/Home.vue'))
    })
  }

  // 引入 About 组件
  const About = (resolve:any) => {
    require.ensure(['./views/About.vue'], () => {
        resolve(require('./views/About.vue'))
    })
  }

//官方文档还推荐使用动态 import 语法来进行代码分块
  //   // 引入 Home 组件
  // const Home = () => import('./views/Home.vue');

  // // 引入 About 组件
  // const About = () => import('./views/About.vue');

Vue.use(Router)
let base:string = `${process.env.BASE_URL}`

export default new Router({
  mode: 'history',
  base: base,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // component: () => import(/* webpackChunkName: "about" */ './views/About.vue') //如果你想给拆分出的文件命名，可以尝试一下 webpack 提供的 Magic Comments（魔法注释）
      component:About
    }
  ]
})
